<template>
  <view>
    <!-- 顶部导航 -->
    <fa-navbar title="个人中心" :border-bottom="false"></fa-navbar>

    <!-- 会员中心 -->
    <view class="bg-white u-p-32 u-p-b-48">
      <view class="u-flex u-row-between">
        <view class="u-flex">
          <block v-if="vuex_token">
            <u-avatar
                size="80"
                :show-sex="true"
                :sex-icon="vuex_user.gender == 1 ? 'man' : 'woman'"
                :src="url || vuex_user.avatar"
                @click="goPage('/pages/my/profile', true)"
            ></u-avatar>
            <view class="u-skeleton-fillet u-m-l-16" @click="goPage('/pages/my/profile', true)">
              {{ vuex_user.nickname || '' }}
            </view>
            <!--					<view class="u-skeleton-fillet u-m-t-10 u-p-l-80 u-p-r-80 u-line-2" @click="goPage('/pages/my/profile', true)">{{ vuex_user.bio || '这家伙很懒，什么也没写！' }}</view>-->
          </block>
          <view v-else class="u-flex">
            <u-avatar size="80" src="0"></u-avatar>
            <view class="u-m-l-16">
              <u-button hover-class="none" size="mini" @click="goPage('/pages/login/mobilelogin')">立即登录</u-button>
            </view>
          </view>
        </view>
        <view class="u-flex">
          <u-icon name="/static/image/my/qrCode.png" size="60" ></u-icon>
          <u-icon class="u-m-l-36" name="/static/image/my/setting.png" size="60" @click="goPage('/pages_sub/setting/setting')"></u-icon>
        </view>
      </view>
      <view class="u-flex u-p-16">
        <text>LV4</text>
        <u-line-progress class="u-flex-1 u-m-l-32" :percent="80" active-color="#006AE4"></u-line-progress>
      </view>

    </view>
    <view class="u-p-t-16 u-p-l-8 u-p-r-8 rounded-2" style="background: #f1f1f1;margin-top: -20px">
      <u-row>
        <u-col span="6">
          <view class="bg-white rounded-2 u-flex u-row-between u-p-32" @click="goPage('/pages_sub/balance/balance')">
            <view>
              <view class="u-font-md u-text-weight">余额</view>
              <view class="u-font-sm">去充值
                <u-icon name="arrow-right" size="24"></u-icon>
              </view>
            </view>
            <u-icon name="/static/image/my/balance.png" size="60"></u-icon>
          </view>
        </u-col>
        <u-col span="6">
          <view class="bg-white rounded-2 u-flex u-row-between u-p-32" @click="goPage('/pages/score/exchange')">
            <view>
              <view class="u-font-md u-text-weight">积分</view>
              <view class="u-font-sm">去兑换
                <u-icon name="arrow-right" size="24"></u-icon>
              </view>
            </view>
            <u-icon name="/static/image/my/score.png" size="60"></u-icon>
          </view>
        </u-col>
      </u-row>
      <view>

      </view>
      <!-- 统计 -->
      <!--      <view class="u-flex u-text-center u-p-l-30 u-p-r-30 u-p-t-50 u-p-b-50 bg-white rounded-2">
              <view class="u-flex-4" @click="goPage('/pages/order/list?status=1', true)">
                <view class="u-text-weight u-font-28">
                  <text v-text="(vuex_user.order && vuex_user.order.created) || 0"></text>
                </view>
                <view class="u-m-t-20">待付款</view>
              </view>
              <view class="u-flex-4 u-border-left u-border-right" @click="goPage('/pages/order/list?status=2', true)">
                <view class="u-text-weight u-font-28">
                  <text v-text="(vuex_user.order && vuex_user.order.paid) || 0"></text>
                </view>
                <view class="u-m-t-20">待发货</view>
              </view>
              <view class="u-flex-4" @click="goPage('/pages/order/list?status=4', true)">
                <view class="u-text-weight u-font-28">
                  <text v-text="(vuex_user.order && vuex_user.order.evaluate) || 0"></text>
                </view>
                <view class="u-m-t-20">待评论</view>
              </view>
            </view>-->
    </view>
    <view class="u-p-16">
      <!--      我的订单-->
      <view class="rounded-2 bg-white u-p-32">
        <text class=" title"> 我的订单</text>
        <u-grid :border="false">
          <u-grid-item
              v-for="(item,index) in orderList"
              :key="index">
            <button class="btn" @click="goPage(item.url,false)">
              <view class="u-flex u-col-center" >
                <u-image width="57rpx" height="57rpx" :src="item.img" mode="aspectFit"/>
              </view>
              <view class=" name">{{ item.name }}</view>
            </button>
          </u-grid-item>
        </u-grid>

      </view>
      <!--      我的记录-->
      <view class="rounded-2 bg-white u-p-32 u-m-t-16">
        <text class=" title"> 我的记录</text>
        <u-grid :border="false">
          <u-grid-item v-for="(item,index) in recordList" :key="index">
            <button class="btn" @click="goPage(item.url,false)">
              <view class="u-flex u-col-center" >
                <u-image width="57rpx" height="57rpx" :src="item.img" mode="aspectFit"/>
              </view>
              <view class=" name">{{ item.name }}</view>
            </button>
          </u-grid-item>
        </u-grid>

      </view>
      <!--      我的卡包-->
      <view class="rounded-2 bg-white u-p-32 u-m-t-16">
        <text class=" title"> 我的卡包</text>
        <u-grid :border="false">
          <u-grid-item v-for="(item,index) in serviceList" :key="index">
           <button class="btn" :open-type="item.name=='联系客服'?'contact':''" @click="goPage(item.url,false)">
             <view class="u-flex u-col-center" >
               <u-image width="57rpx" height="57rpx" :src="item.img" mode="aspectFit"/>
             </view>
             <view class=" name">{{ item.name }}</view>
           </button>
          </u-grid-item>
        </u-grid>
      </view>
    </view>

    <fa-tabbar></fa-tabbar>
  </view>
</template>

<script>
import {avatar} from '@/common/fa.mixin.js';
import UImage from "../../uview-ui/components/u-image/u-image.vue";

export default {
  components: {UImage},
  mixins: [avatar],
  computed: {
    wavetop() {
      return this.$u.http.config.baseUrl + '/assets/addons/shop/img/wave-top.png';
    },
    wavemiddle() {
      return this.$u.http.config.baseUrl + '/assets/addons/shop/img/wave-mid.png';
    },
    wavebottom() {
      return this.$u.http.config.baseUrl + '/assets/addons/shop/img/wave-bot.png';
    },
    isBind() {
      return false;
    }
  },
  onShow() {
    if (this.vuex_token) {
      this.getUserIndex();
    } else {
      this.$u.vuex('vuex_user', {});
    }
    //移除事件监听
    uni.$off('uAvatarCropper', this.upload);
  },
  data() {
    return {
      // 状态栏高度，H5中，此值为0，因为H5不可操作状态栏
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
      // 导航栏内容区域高度，不包括状态栏高度在内
      navbarHeight: 44,
      url: '',
      form: {
        avatar: ''
      },
      orderList: [
        {
          id: 1,
          name: '待付款',
          img: '/static/image/my/unUsed.png',
          url: '/pages/order/list?status=1',
        },
        {
          id: 2,
          name: '待收货',
          img: '/static/image/my/using.png',
          url: '/pages/order/list?status=2',
        },
        {
          id: 3,
          name: '待评价',
          img: '/static/image/my/isUsed.png',
          url: '/pages/order/list?status=4',
        },
      ],
      recordList: [
        {
          id: 1,
          name: '商城记录',
          img: '/static/image/my/shopList.png',
          url: '/pages_sub/history/history',
        },
        {
          id: 2,
          name: '积分记录',
          img: '/static/image/my/scoreList.png',
          url: '/pages/score/order',
        },
        {
          id: 3,
          name: '浏览记录',
          img: '/static/image/my/lookList.png',
          url: '/pages_sub/history/history',
        },
      ],
      serviceList: [
        {
          id: 1,
          name: '卡包',
          img: '/static/image/my/card.png',
          url: '/pages_sub/card/card',
        },
        {
          id: 2,
          name: '优惠券',
          img: '/static/image/my/coupon.png',
          url: '/pages/coupon/user',
        },
        {
          id: 3,
          name: '收藏',
          img: '/static/image/my/collect.png',
          url: '/pages/my/collect',
        },
        {
          id: 4,
          name: '地址管理',
          img: '/static/image/my/address.png',
          url: '/pages/address/address',
        },
        {
          id: 5,
          name: '联系客服',
          img: '/static/image/my/service.png',
          url: '',
        },
        {
          id: 6,
          name: '好友助力',
          img: '/static/image/my/help.png',
          url: '/pages_sub/assistance/help',
        },
		{
		  id: 7,
		  name: '分销商入驻',
		  img: '/static/image/my/help.png',
		  url: '/pages/uform/userrz',
		},	
		
		{
		  id: 8,
		  name: '扫码支付',
		  img: '/static/image/my/help.png',
		  url: '/pages/uform/creditewm',
		},
		{
		  id: 9,
		  name: '我的支付码',
		  img: '/static/image/my/help.png',
		  url: '/pages/uform/mypayewm',
		},
		{
		  id: 9,
		  name: '门店列表',
		  img: '/static/image/my/help.png',
		  url: '/pages/order/storelist',
		},
		// D:\xiaochengxuself\shop_club3\shop_club\袁帅商城\unpackage\dist\dev\mp-weixin\pages\coupon\coupon.json
		{
		  id: 10,
		  name: '领取优惠券',
		  img: '/static/image/my/help.png',
		  url: '/pages/coupon/coupon',
		}
      ]
    }
  },
  methods: {
    getUserIndex: async function () {
      let res = await this.$api.getUserIndex();
      uni.stopPullDownRefresh();
      if (res.code == 1) {
        this.$u.vuex('vuex_user', res.data.userInfo || {});
        if (res.data.showProfilePrompt && !this.vuex_setting.prompted) {
          // 弹窗每次登录状态只提示一次
          this.$u.vuex('vuex_setting.prompted', true);
          uni.showModal({
            title: '温馨提示',
            confirmText: '去设置',
            cancelText: '取消',
            showCancel: true,
            content: '当前未设置昵称，请设置昵称后再继续操作',
            success: (res) => {

              if (res.confirm) {
                this.$u.route("/pages/my/profile");
              } else if (res.cancel) {

              }
            }
          });
        }
      } else {
        this.$u.toast(res.msg);
        return;
      }
    },
    toSignin() {
      if (!this.vuex_user.is_install_signin) {
        this.$refs.uTips.show({
          title: '请先安装会员签到插件插件或启用该插件',
          type: 'error',
          duration: '3000'
        });

        return;
      }
      this.goPage('/pages/signin/signin', true);
    },
    editAvatar: async function () {
      let res = await this.$api.goUserAvatar({
        avatar: this.form.avatar
      });
    },
    // #ifndef MP-WEIXIN
    callphone() {
      uni.makePhoneCall({
        phoneNumber: this.vuex_config.phone //仅为示例
      });
    }
    // #endif
  },
  //下拉刷新
  onPullDownRefresh() {
    if (this.vuex_token) {
      this.getUserIndex();
    } else {
      uni.stopPullDownRefresh();
      this.$u.toast('请先登录');
      this.$u.vuex('vuex_user', {});
    }
  }
};
</script>

<style lang="scss">
page {
  background-color: #f1f1f1;
}

.fa-cell {
  color: #606266;
}
.btn{
  background-color: transparent;
  padding: 0!important;
  display: flex;
  flex-direction: column;
  align-items: center;
  .name{
    font-size: 13px;
    margin-top: 0;
  }
}
.btn::after{
  border: none;
}
@keyframes wavemove {
  0% {
    transform: translateX(0) translateZ(0) scaleY(1);
  }
  50% {
    transform: translateX(-25%) translateZ(0) scaleY(0.55);
  }
  100% {
    transform: translateX(-50%) translateZ(0) scaleY(1);
  }
}
.name{
  font-size: 24rpx;
}
.title{
  font-size: 30rpx;
  font-weight: bold;

}
</style>
